Seensa
Bootstrap, addunyaa irratti marsariitiiwwan deebii kennan, mobaayila jalqabaa ijaaruuf baay'ee beekamaa ta'e, jsDelivr fi fuula jalqabaa unkaa wajjin jalqabi.
Saffisaan jalqabuu
Bootstrap daftee pirojektii keessanitti dabaluu barbaadduu? jsDelivr, CDN madda banaa bilisaa fayyadami. Geggeessaa paakeejii fayyadamuu moo faayiloota madda buufachuu barbaadduu? Gara fuula downloads jedhutti qajeela .
CSS jedhamuun beekama
CSS keenya fe'uuf akkaataa barruulee biroo hunda duratti barruu akkaataa <link>
gara keetti waraabii-maxxansi .<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
JS jedhamuun beekama
Qaamonni keenya baay'een isaanii hojjechuuf fayyadama JaavaScript barbaadu. Addatti ammoo, isaanis JavaScript plugins mataa keenyaa fi Popper barbaadu . S armaan gadii keessaa tokko<script>
naannoo dhuma fuula keetii, sirriitti mallattoo cufiinsaa dura kaa'i </body>
, isaan dandeessisuuf.
Hidhaa
Bootstrap JavaScript plugin fi hirkattummaa hunda bundle keenya lamaan keessaa tokko waliin hammachiisi. Lamaanuu bootstrap.bundle.js
fi Popperbootstrap.bundle.min.js
dabalatee tooltipps fi popovers keenyaaf. Odeeffannoo dabalataa waa'ee maaltu Bootstrap keessatti hammatame argachuuf, maaloo kutaa qabiyyee keenya ilaalaa.
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
Adda baasuu
Yoo furmaata iskiriiptii adda addaa waliin deemuuf murteessite, Popper dursee dhufuu qaba (yoo gorsa meeshaa ykn popovers fayyadamaa jirta ta'e), achiis plugins JavaScript keenya.
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
Moojuulota
Yoo fayyadamtan <script type="module">
, maaloo kutaa moojuulii Bootstrap fayyadamuu keenya ilaalaa.
Qaamolee
Qaamolee kamtu ifatti JavaScript fi Popper keenya barbaada? Link show components jedhu armaan gadii cuqaasaa. Yoo waa'ee caasaa fuula waliigalaa tasumaa mirkanaa'aa hin taane, unkaa fuula fakkeenyaaf dubbisuu itti fufi.
Qaamolee JaavaScript barbaadan agarsiisi
- Akeekkachiisa hojii irraa ari'amuu
- Qabduu haalata jijjiiruu fi sanduuqa filannoo/hojii raadiyoo
- Kaarooseelii amala islaayidii, too'annoo fi agarsiistota hundaaf
- Mul'achuu qabiyyee jijjiiruuf kuffisi
- Dropdowns agarsiisuu fi bakka kaa'uuf (akkasumas Popper barbaada ) .
- Moodaalota agarsiisa, iddoo, fi amala tarree
- Navbar amala deebii kennuu hojiirra oolchuuf plugin keenya Collapse dheeressuuf
- Offcanvases agarsiisuuf, iddoo kaa'uu fi amala tarreef
- Toostii agarsiisuu fi hojii irraa ari'uuf
- Tooltips fi popovers agarsiisuu fi bakka itti kaa'uuf (akkasumas Popper barbaada ) .
- Amala qaxxaamuraa fi fooyya'iinsa navigeeshiniif Scrollspy
Unka jalqabaa
Fuulonni keessan ulaagaalee dizaayinii fi misoomaa haaraa ta’aniin akka qophaa’an mirkaneeffadhaa. Kana jechuun gosa doktii HTML5 fayyadamuu fi amala deebii sirrii ta'eef mallattoo meetaa buufata ilaalchaa hammachuu jechuudha. Hundaa walitti qabdee fuula kee akkas fakkaachuu qaba:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
-->
</body>
</html>
Tarkaanfiiwwan itti aanuuf, qabiyyee fi qaamolee marsariitii keetii diriirsuu jalqabuuf , galmeewwan Haalata ykn fakkeenyota keenya ofiisaa daawwadhu.
Globals barbaachisoo ta'an
Bootstrap akkaataa fi qindaa'inoota addunyaa barbaachisoo muraasa yeroo fayyadamtu beekuu qabdan qacara, isaan hundi jechuun ni danda'ama gara idileessuu akkaataa qaxxaamuraa biraawzariitti kan qophaa'anidha. Mee keessa haa cuuphamnu.
Gosa doktii HTML5
Bootstrap fayyadama HTML5 doctype barbaada. Isa malee, funky incomplete styling tokko tokko ni argita, garuu dabalatee hiccups guddaa fiduu hin qabu.
<!doctype html>
<html lang="en">
...
</html>
Meeta tag deebii kan kennu
Bootstrap is developed mobile first , tooftaa nuti jalqaba koodii meeshaalee moobaayilaa fooyyessuu fi sana booda gaaffii miidiyaa CSS fayyadamuun akka barbaachisummaa isaatti qaamolee guddisuu. Meeshaalee hundaaf agarsiisa sirrii fi guddisuu tuquu mirkaneessuuf, mallattoo meetaa buufata ilaalchaa deebii kennu gara keetti dabali <head>
.
<meta name="viewport" content="width=device-width, initial-scale=1">
Fakkeenya kanaa gochaan unkaa jalqabaa keessatti arguu dandeessa .
Sanduuqa-saayizii gochuu
CSS keessatti safara qajeelaa ta'eef, box-sizing
gatii waliigalaa irraa content-box
gara jijjiirra border-box
. Kunis padding
bal'ina xumuraa shallagame elementii tokkoo irratti dhiibbaa akka hin qabne mirkaneessa, garuu sooftiweerii qaama sadaffaa tokko tokko kan akka Google Maps fi Google Custom Search Engine irratti rakkoo uumuu danda'a.
Yeroo hin baramnetti irra darbuu qabdutti, waan akka armaan gadii fayyadami:
.selector-for-some-widget {
box-sizing: content-box;
}
Cuqqaa armaan olii waliin, qaamolee man'ee—qabiyyee karaa ::before
fi uumame dabalatee —hundi isaanii kan sanaaf ::after
ifteessame ni dhaalu .box-sizing
.selector-for-some-widget
Waa'ee moodeela saanduqaa fi safara CSS Tricks irratti caalaatti baradhu .
Irra deebi'ii jalqabi
Agarsiisa qaxxaamuraa-browsarii fooyya'eef, Reboot fayyadamnee wal-hinsimne biraawzarootaa fi meeshaalee hunda keessatti sirreessuuf yeroo xiqqoo yaada dabalataa elementoota HTML beekamoo ta'aniif kennina.
Hawaasa
Misooma Bootstrap yeroo yeroon hordofaa fi qabeenya gargaaru kanaan hawaasa bira gahaa.
- The Official Bootstrap Blog dubbisaa fi subscribe godhaa .
- IRC keessatti Bootstrappers waliin haasa'aa.
irc.libera.chat
Server irratti, chaanaalii#bootstrap
keessatti. - Gargaarsi hojiirra oolmaa Stack Overflow (tagged ) irratti argamuu danda'a
bootstrap-5
. - Developers jecha furtuu
bootstrap
paakeejiiwwan dalagaa Bootstrap fooyyessanii ykn dabalan irratti yeroo karaa npm ykn mala geejjibaa walfakkaataa raabsan argannoo guddaa argachuuf fayyadamuu qabu.
Akkasumas oduu haaraa fi viidiyoo muuziqaa ajaa'ibaa argachuuf @getbootstrap Twitter irratti hordofuu dandeessu .